<template>
	<div>
		<div ref="btn" >
			<button  class="ui black icon m-right-top" style="height: 100%;"  @click="toggle" >
				<i class="sidebar icon"></i>
			</button>
		</div>
		
		<div ref="nav" class="ui left fixed inverted stackable vertical menu m-mobile-hide" :class="{'m-mobile-show':isshow}"  style="background-color: #212529;width: 18%;">
			<div  class="ui container">
				<router-link to="/">
					<h3 class="ui header item m-grew" style="color: wheat;white-space:nowrap;">万物皆可喵<h3 style="color: white;">的Blog</h3>
					</h3>
				</router-link>
				<router-link to="/home" class="item" :class="{'active':$route.name==='home'}">
					<i class="home icon"></i>首页
				</router-link>
				<el-dropdown trigger="click" @command="categoryRoute">
					<span class="el-dropdown-link item " :class="{'active':$route.name==='category'}">
						<i class="idea icon"></i>分类<i class="caret down icon"></i>
					</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item :command="category.name" v-for="(category,index) in categoryList" :key="index">{{ category.name }}</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<router-link to="/archives" class="item" :class="{'active':$route.name==='archives'}">
					<i class="clone icon"></i>日志
				</router-link>
				<router-link to="/moments" class="item" :class="{'active':$route.name==='moments'}">
					<i class="comment alternate outline icon"></i>动态
				</router-link>
				<router-link to="/friends" class="item" :class="{'active':$route.name==='friends'}">
					<i class="users icon"></i>资源分享
				</router-link>
				<router-link to="/about" class="item" :class="{'active':$route.name==='about'}">
					<i class="info icon"></i>关于我
				</router-link>


			</div>
		</div>
	</div>




</template>

<script>
	import $ from 'jquery';
	import {
		getSearchBlogList
	} from "@/api/blog";
	import {
		mapState
	} from 'vuex'

	export default {
		name: "Test",
		props: {
			blogName: {
				type: String,
				required: true
			},
			categoryList: {
				type: Array,
				required: true
			},
		},
		data() {
			return {
				notshow:false,
				isshow:false,
				mobileHide: true,
				queryString: '',
				queryResult: [],
				timer: null
			}
		},
		computed: {
			...mapState(['clientSize'])
		},
		watch: {
			//路由改变时，收起导航栏
			'$route.path'() {
				// this.mobileHide = true
				// this.notshow = true
				// this.isshow = false
			}
		},
		mounted() {
			// $('#button1').click(function(){
			// 	$('.ui.sidebar')
			// 	  .sidebar('toggle')
			// 	  console.log("jq")
			// 	;
			// })
			//监听点击事件，收起导航菜单
			document.addEventListener('click', (e) => {
				//遍历冒泡
				let flag = e.path.some(item => {
					if (item === this.$refs.nav) {
						return false
					}
					if(item === this.$refs.btn){
						return true
					}
	
				})
				// console.log("flag",flag)
				//如果导航栏是打开状态，且点击的元素不是Nav的子元素，则收起菜单
				if (!flag) {
					// this.mobileHide = true
					this.isshow = false
					
					// this.notshow = false
					
				}
			})
		},
		methods: {
			toggle() {
				this.isshow = !this.isshow
				// this.notshow = true
				// console.log("isshow",this.isshow)
			},
			categoryRoute(name) {
				this.$router.push(`/category/${name}`)
			},
			debounceQuery(queryString, callback) {
				this.timer && clearTimeout(this.timer)
				this.timer = setTimeout(() => this.querySearchAsync(queryString, callback), 1000)
			},
			querySearchAsync(queryString, callback) {
				if (queryString == null ||
					queryString.trim() === '' ||
					queryString.indexOf('%') !== -1 ||
					queryString.indexOf('_') !== -1 ||
					queryString.indexOf('[') !== -1 ||
					queryString.indexOf('#') !== -1 ||
					queryString.indexOf('*') !== -1 ||
					queryString.trim().length > 20) {
					return
				}
				getSearchBlogList(queryString).then(res => {
					if (res.code === 200) {
						this.queryResult = res.data
						if (this.queryResult.length === 0) {
							this.queryResult.push({
								title: '无相关搜索结果'
							})
						}
						callback(this.queryResult)
					}
				}).catch(() => {
					this.msgError("请求失败")
				})
			},
			handleSelect(item) {
				if (item.id) {
					this.$router.push(`/blog/${item.id}`)
				}
			}
		}
	}
</script>

<style>
	.ui.inverted.menu .item:before {
		background-color: rgba(255, 255, 255, .08) !important;
	}

	.ui.fixed.menu .container {
		width: 95% !important;
		margin-left: auto !important;
		margin-right: auto !important;


	}

	.ui.fixed.menu {
		transition: .3s ease-out;

	}

	.ui.inverted.pointing.menu.transparent {
		background: transparent !important;
	}

	.ui.inverted.pointing.menu.transparent .active.item:after {
		background: transparent !important;
		transition: .3s ease-out;
	}

	.ui.inverted.pointing.menu.transparent .active.item:hover:after {
		background: transparent !important;
	}

	.el-dropdown-link {
		outline-style: none !important;
		outline-color: unset !important;
		height: 100%;
		cursor: pointer;
	}

/* 	.el-dropdown-menu {
		margin: 7px 0 0 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: #1b1c1d !important;
	}

	.el-dropdown-menu__item {
		padding: 0 15px !important;
		color: rgba(255, 255, 255, .9) !important;
	}

	.el-dropdown-menu__item:hover {
		background: rgba(255, 255, 255, .08) !important;
	} */

	.el-popper .popper__arrow::after {
		content: none !important;
	}

	.popper__arrow {
		display: none !important;
	}

	.m-search {
		min-width: 220px;
		padding: 0 !important;

	}


	.m-search i {
		color: rgba(255, 255, 255, .9) !important;
	}

	.m-search-item {
		min-width: 350px !important;
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	.m-search-item li {
		line-height: normal !important;
		padding: 8px 10px !important;

	}

	.m-search-item li .title {
		text-overflow: ellipsis;
		overflow: hidden;
		font-size: 1.3625rem;
		color: rgba(0, 0, 0, 0.87);
	}

	.m-search-item li .content {
		text-overflow: ellipsis;
		font-size: 1.1375rem;
		color: rgba(0, 0, 0, .70);
	}
</style>
